<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>部署配置</title>
    <style>
        .dynamic-input-t6 {
            border: 1px solid #ccc;
            padding: 5px;
            font-size: 16px;
            min-width: 110px; /* 设置一个最小宽度 */
            margin-top: 10px;
        }

        .dynamic-input-t7 {
            border: 1px solid #ccc;
            padding: 5px;
            font-size: 16px;
            min-width: 100px; /* 设置一个最小宽度 */
        }
    </style>
</head>
<body>
<div>
    <p>T6厂</p>
    <select id="factory-t6" style="width: 120px;height: 23px;">
        <option value="172.22.57.34:8090" label="THCVD320">THCVD320</option>
        <option value="172.22.57.38:8090" label="THCVD420">THCVD420</option>
        <option value="172.22.57.31:8090" label="THCVD520">THCVD520</option>
        <option value="172.22.57.32:8090" label="THCVD620">THCVD620</option>
        <option value="172.22.57.33:8090" label="THCVD720">THCVD720</option>
        <option value="172.22.57.35:8090" label="THCVD820">THCVD820</option>
        <option value="127.0.0.1:8090" label="THCVD920">THCVD920</option>
        <option value="172.22.57.37:8090" label="THCVDA20">THCVDA20</option>
        <option value="172.22.57.36:8090" label="THCVDB20">THCVDB20</option>
    </select>
    <select id="service-t6" style="width: 120px;height: 23px;">
        <option value="Spectrometer">adaptor</option>
        <option value="LightSpectrum">lightSpectrum-api</option>
        <option value="start-nginx">lightSpectrum-web</option>
        <option value="websocket-server">websocket</option>
        <option value="start-iotdb">iotdb</option>
        <option value="MySQL">MySQL</option>
    </select>

    <select id="commands-t6" style=" width: 120px;height: 23px;">
        <option value="query">查询服务状态</option>
        <option value="start">启动服务</option>
        <option value="stop">停止服务</option>
        <option value="restart">重启服务</option>
        <option value="movefile">移动文件</option>
    </select>
    <button onclick="connectT6()" id="isCon">点击连接websocket</button>
    <button onclick="closeConnectionT6()" id="isDisT6">断开连接</button>
    <button onclick="sendMessageT6()" id="execCommand" disabled>执行命令</button>
    待移动文件地址：
    <input id="moveAddressT6" cols="30" rows="1" placeholder="请输入正确的地址"/>
    目标文件夹：
    <input id="targeAddressT6" cols="30" rows="1" placeholder="请输入正确的地址"/>
    备注：
    <input id="remarkT6" cols="30" rows="1" placeholder="该备注会写入readme.txt中"/>
    执行结果：
    <input id="resultT6" class="dynamic-input-t6" type="text" disabled/>
</div>
<div>
    <p>T7厂</p>
    <select id="factory-t7" style="  width: 120px;height: 23px;">
        <option value="172.25.56.224:8090" label="TJCVD320">TJCVD320</option>
        <option value="172.25.56.225:8090" label="TJCVD420">TJCVD420</option>
        <option value="172.25.56.226:8090" label="TJCVD520">TJCVD520</option>
        <option value="172.25.56.227:8090" label="TJCVD620">TJCVD620</option>
        <option value="172.25.56.228:8090" label="TJCVD720">TJCVD720</option>
        <option value="172.25.56.229:8090" label="TJCVD820">TJCVD820</option>
        <option value="172.25.56.230:8090" label="TJCVD920">TJCVD920</option>
        <option value="172.25.56.231:8090" label="TJCVDA20">TJCVDA20</option>
        <option value="172.25.56.232:8090" label="TJCVDC20">TJCVDC20</option>
        <option value="172.25.56.233:8090" label="TJCVDD20">TJCVDD20</option>
        <option value="172.25.56.234:8090" label="TJCVDE20">TJCVDE20</option>
    </select>
    <select id="service-t7" style="  width: 120px;height: 23px;">
        <option value="Spectrometer">adaptor</option>
        <option value="LightSpectrum">lightSpectrum-api</option>
        <option value="start-nginx">lightSpectrum-web</option>
        <option value="websocket-server">websocket</option>
        <option value="start-iotdb">iotdb</option>
        <option value="MySQL">MySQL</option>
    </select>
    <select id="commands-t7" style="  width: 120px;height: 23px;">
        <option value="query">查询服务状态</option>
        <option value="start">启动服务</option>
        <option value="stop">停止服务</option>
        <option value="restart">重启服务</option>
        <option value="movefile">移动文件</option>
    </select>
    <button onclick="connectT7()">点击连接websocket</button>
    <button onclick="closeConnectionT7()">断开连接</button>
    <button onclick="sendMessageT7()">执行命令</button>
    待移动文件地址：
    <input id="moveAddressT7" cols="30" rows="1" placeholder="请输入正确的地址"/>
    目标文件夹：
    <input id="targeAddressT7" cols="30" rows="1" placeholder="请输入正确的地址"/>
    备注：
    <input id="remarkT7" cols="30" rows="1" placeholder="该备注会写入readme.txt中"/>
    执行结果：
    <input id="resultT7" type="text" disabled cols="50" rows="1"/>
</div>

</body>
<script>

    // 1. 创建一个 WebSocket 对象
    let socketT6;
    let socketT7;
    let isSelectedT6 = true;
    let isSelectedT7 = true;
    function cLT6(url,deviceName) {
        // 1. 创建一个 WebSocket 对象
        socketT6 = new WebSocket("ws://"+url+"/websocket/"+deviceName);
        var waitMessage = document.getElementById("resultT6");
        var isCon = document.getElementById("isCon");
        var isDisT6 = document.getElementById("isDisT6");
        var execCommand = document.getElementById("execCommand");
        var factoryT6 = document.getElementById("factory-t6");

        execCommand.disabled = true;
        waitMessage.disabled = true;
        isCon.disabled = true;
        // 连接的过程不能断开连接
        isDisT6.disabled = true;

        waitMessage.value = "连接中，请等待...";
        adjustWidth(waitMessage);
        // 2. 监听 WebSocket 连接事件
        socketT6.addEventListener("open", function (event) {
            var resultDoc = document.getElementById("resultT6");
            resultDoc.value = event.data;
            isDisT6.disabled = false;
            execCommand.disabled = false;
            factoryT6.disabled = true;
            adjustWidth(resultDoc);
        });
        // 3. 监听 WebSocket 收到消息事件
        socketT6.addEventListener("message", function (event) {
            var resultDoc = document.getElementById("resultT6");
            resultDoc.value = event.data;
            adjustWidth(resultDoc);
        });
        // 4. 监听 WebSocket 关闭事件
        socketT6.addEventListener("close", function (event) {
            var resultDoc = document.getElementById("resultT6");
            var factoryT6 = document.getElementById("factory-t6");
            resultDoc.value = "连接出错或连接断开了！";

            var isDisT6 = document.getElementById("isDisT6");
            var isCon = document.getElementById("isCon");
            var execCommand = document.getElementById("execCommand");

            // 禁用操作
            execCommand.disabled = true;
            isCon.disabled = false;
            // 连接的过程不能断开连接
            isDisT6.disabled = false;
            // 若连接不上websocket则设备禁用取消
            factoryT6.disabled = false;

            // 若连接不上自动打开禁用
            adjustWidth(resultDoc);
        });
    }

    function cLT7(url,deviceName) {
        // 1. 创建一个 WebSocket 对象
        socketT7 = new WebSocket("ws://"+url+"/websocket/"+deviceName)

        // 2. 监听 WebSocket 连接事件
        socketT7.addEventListener("open", function (event) {
            console.log("连接事件成功:", event);
        });
        // 3. 监听 WebSocket 收到消息事件
        socketT7.addEventListener("message", function (event) {
            console.log("接收到的消息事件:", event.data);
            document.getElementById("wbHtml").value = event.data;
        });
        // 4. 监听 WebSocket 关闭事件
        socketT7.addEventListener("close", function (event) {
            console.log("出错了关闭WebSocket:", event);
            document.getElementById("resultT7").value = event;
        });
        // 5. 监听 WebSocket 出错事件
        socketT7.addEventListener("error", function (event) {
            console.error("WebSocket error报错:", event);
        });
    }

    // 6、webSocket发送消息
    function sendMessageT6() {
        if (socketT6 != null || socketT6 != undefined) {
            let deviceMessage = document.getElementById("factory-t6").label;
            let serviceMessage = document.getElementById("service-t6").value;
            let commandsMessage = document.getElementById("commands-t6").value;
            socketT6.send(serviceMessage+"-"+commandsMessage);
        } else {
            alert("请先连接websocket");
        }
    }

    function sendMessageT7() {
        var t7ConnectionStatus = getT7ConnectionStatus();
        if (t7ConnectionStatus != null || t7ConnectionStatus != undefined) {
            let deviceMessage = document.getElementById("factory-t7").value;
            console.log(deviceMessage)
            let serviceMessage = document.getElementById("service-t7").value;
            let commandsMessage = document.getElementById("commands-t7").value;
            socketT7.send(deviceMessage+"-"+serviceMessage+"-"+commandsMessage);
        } else {
            alert("请先连接websocket");
        }
    }

    function connectT6() {
        // 得到当前选中设备名的ip地址
        var factory = document.getElementById("factory-t6");
        var url = factory.value;
        var selectedOption = factory.options[factory.selectedIndex];
        // 获取当前选择的<option>元素的label值
        var deviceName = selectedOption.label;
        cLT6(url,deviceName)
    }

    function closeConnectionT6() {
        var resultT6 = document.getElementById("resultT6");
        if (socketT6 == null || socketT6 == undefined) {
            resultT6.value = "当前未连接该服务器！";
            adjustWidth(resultT6)
        } else {
            socketT6.close();
            socketT6 = null;
        }
    }

    function getT6ConnectionStatus() {
        return socketT6;
    }

    function connectT7() {
        // 得到当前选中设备名的ip地址
        var url = document.getElementById("factory-t7").value;
        var deviceName = document.getElementById("factory-t7").name;
        console.log(url,deviceName);
        cLT7(url,deviceName);
    }

    function getT7ConnectionStatus() {
        return socketT7;
    }

    function closeConnectionT7() {

    }

    function adjustWidth(element) {
        // 创建一个临时的span元素，用来测量文本的宽度
        const span = document.createElement('span');
        span.style.visibility = 'hidden';
        span.style.position = 'absolute';
        span.style.whiteSpace = 'pre';
        span.style.fontSize = window.getComputedStyle(element).fontSize;
        span.innerText = element.value || element.placeholder;
        document.body.appendChild(span);

        // 获取span的宽度并设置给input
        const width = span.offsetWidth;
        element.style.width = `${width + 10}px`; // 加上一点padding
        document.body.removeChild(span);
    }

    document.addEventListener('DOMContentLoaded', function() {
        const input = document.querySelector('.dynamic-input-t6');
        adjustWidth(input); // 初始调整宽度
        input.addEventListener('input', function() {
            adjustWidth(input);
        });
    });
</script>
</html>

